<template>
  <basic-container class="log" v-loading="loading" element-loading-text="数据加载中...">
    <dataList
      ref="log"
      hideFilterBtn
      openIndex
			operaColumnWidth="120"
      :pageInfo="pager"
      :listData="tableData"
      :dataInfo="dataInfo"
      :operaInfo="operaInfo"
      :menuList="[]"
      :listLayout="['menu','filter']"
      :filterList="filterList"
      @btn-click="handleBtnClick"
    ></dataList>
    <v-dialog :show.sync="dialogVisible" width="1000px" title="查看">
      <el-form ref="tableOption" :model="tableOption" label-width="80px" class="form-wrap">
        <el-form-item label="标题" prop="title">
          <span class="in_txt">{{tableOption.title}}</span>
        </el-form-item>
        <el-form-item label="IP地址" prop="remoteAddr">
          <span class="in_txt">{{tableOption.remoteAddr}}</span>
        </el-form-item>
        <el-form-item label="请求方式" prop="method">
          <span class="in_txt">{{tableOption.method}}</span>
        </el-form-item>
        <el-form-item label="操作人" prop="createBy">
          <span class="in_txt">{{tableOption.createBy}}</span>
        </el-form-item>
        <el-form-item label="请求时间(毫秒)" prop="time">
          <span class="in_txt">{{tableOption.time}}</span>
        </el-form-item>
        <el-form-item label="创建时间" prop="createTime">
          <span class="in_txt">{{tableOption.createTime}}</span>
        </el-form-item>
        <el-form-item label="请求参数" prop="params" class="full">
          <span class="in_txt">{{tableOption.params}}</span>
        </el-form-item>
        <el-form-item label="异常信息" prop="exception" class="full">
          <span class="in_txt">{{tableOption.exception}}</span>
        </el-form-item>
      </el-form>
    </v-dialog>
  </basic-container>
</template>

<script>
import { delObj, fetchList } from '~/admin/api/log'
export default {
  name: "sms",
  provide () {
    return {
      initList: this.getListData
    };
  },
  beforeMount () {
    this.getListData()
    this.methodList = this.getDict('method_type')
  },
  data () {
    return {
      tableData: [],
      // 请求参数
      params: {
        current: 1,
        size: 10
      },
      // 分页
      pager: {
        total: 0, // 总页数
        current: 1, // 当前页数
        size: 10 // 每页显示多少条
      },
      filterList: [
        { label: '标题', inputType: 'input', name: 'title', placeholder: '请输入标题', defaultValue: '' },
        { label: '请求方式', inputType: 'select', name: 'method', children:[{value:'POST',label:'POST'},{value:'GET',label:'GET'},{value:'PUT',label:'PUT'},{value:'DELETE',label:'DELETE'},{value:'HEAD',label:'HEAD'}], multiple:false, defaultValue: '' },
        { label: '操作人', inputType: 'input', name: 'createBy', placeholder: '请输入操作人', defaultValue: '' },
				{ label: '创建时间', inputType: 'daterange', name: ['createTimeStart','createTimeEnd'],  defaultValue: ['',''] }
      ],
      // 页面loading
      loading: false,
      // 弹窗
      dialogVisible: false,
      tableOption: {
        type: '',
        title: '',
        remoteAddr: '',
        method: '',
        createBy: '',
        time: '',
        createTime: '',
        params: '',
        exception: ''
      },
      // 字典
      methodList: [],
      logList: []
    }
  },
  computed: {
    //权限
    permissionList (scope) {
      return {
        delBtn: this.getPermissions('sys_log_del'),
        getBtn: this.getPermissions('sys_log_view')
      }
    },
    //数据表头
    dataInfo () {
      return [
        { label: '标题', prop: 'title', width: '220', 'show-overflow-tooltip': true },
        { label: 'IP地址', prop: 'remoteAddr', width: '150' },
        { label: '请求方式', prop: 'method',  width: '120' },
        { label: '操作人', prop: 'createBy', width: '180', 'show-overflow-tooltip': true },
        { label: '请求时间(毫秒)', prop: 'time', width: '150' },
        { label: '创建时间', prop: 'createTime', width: '180' },
      ]
    },
    //操作按钮
    operaInfo () {
      return [
        { label: '查看', name: 'look', verify: () => this.permissionList.getBtn },
        { label: '删除', name: 'del', verify: () => this.permissionList.delBtn },
      ]
    }
  },
  methods: {
    // 获取列表
    getListData (params = {}) {
      this.loading = true;
      let requestData = { ...this.params, ...params };
      let obj = {}
      for (let key in requestData) {
        if ((requestData[key] === 0 || requestData[key]) && requestData[key].toString().replace(/(^\s*)|(\s*$)/g, '') !== '') {
          obj[key] = requestData[key]
        }
      }
      requestData = obj
      fetchList(requestData)
        .then(res => {
          const { total, current, size, records } = res.data.data;
          this.tableData = records;
          this.params = requestData;
          this.pager = { total, current, size };
        })
        .finally(() => {
          this.loading = false;
        });
    },
    // 按钮点击监听
    handleBtnClick ({ type, row }) {
      switch (type) {
        case 'look':
          this.handleLook(row)
          break;
        case 'del':
          this.rowDel(row)
          break;
        default:
          break
      }
    },
    // 请求方式初始化
    initMethod (row, column, callValue) {
      let obj = this.methodList.find(it => it.value === callValue)
      if (obj) {
        return obj.label
      }
      return ''
    },
    // 删除
    rowDel (row) {
      this.$confirm('是否确认删除ID为"' + row.id + '"的日志?', '警告', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(function () {
        return delObj(row.id)
      }).then(data => {
        this.getListData({ current: 1 })
        this.$message.success('删除成功')
      })
    },
    // 查看
    handleLook (row) {
      this.tableOption = row
      this.dialogVisible = true
    },
    //字典项取值
    getInit (num, sum) {
      let obj = sum.find(it => it.value === num)
      if (obj) {
        return obj.label
      }
      return ''
    }
  }
}
</script>

<style scoped lang="scss">
.log {
  @include formWrap(2);
  .in_txt {
    color: #999;
  }
}
</style>
